<script>
import { n__ } from '~/locale';
import { stripHtml } from '~/lib/utils/text_utility';
import statusIcon from '../mr_widget_status_icon.vue';
import eventHub from '../../event_hub';

export default {
  name: 'MRWidgetFailedToMerge',

  components: {
    statusIcon,
  },

  props: {
    mr: {
      type: Object,
      required: true,
      default: () => ({}),
    },
  },

  data() {
    return {
      timer: 10,
      isRefreshing: false,
      intervalId: null,
    };
  },

  computed: {
    mergeError() {
      return this.mr.mergeError ? stripHtml(this.mr.mergeError, ' ').trim() : '';
    },
    timerText() {
      return n__(
        'Refreshing in a second to show the updated status...',
        'Refreshing in %d seconds to show the updated status...',
        this.timer,
      );
    },
  },

  mounted() {
    this.intervalId = setInterval(this.updateTimer, 1000);
  },

  created() {
    eventHub.$emit('DisablePolling');
  },

  beforeDestroy() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },

  methods: {
    refresh() {
      this.isRefreshing = true;
      eventHub.$emit('MRWidgetUpdateRequested');
      eventHub.$emit('EnablePolling');
    },
    updateTimer() {
      this.timer = this.timer - 1;

      if (this.timer === 0) {
        this.refresh();
      }
    },
  },
};
</script>
<template>
  <div class="mr-widget-body media">
    <template v-if="isRefreshing">
      <status-icon status="loading" />
      <span class="media-body bold js-refresh-label">
        {{ s__("mrWidget|Refreshing now") }}
      </span>
    </template>
    <template v-else>
      <status-icon
        :show-disabled-button="true"
        status="warning"
      />
      <div class="media-body space-children">
        <span class="bold">
          <span
            v-if="mr.mergeError"
            class="has-error-message"
          >
            {{ mergeError }}.
          </span>
          <span v-else>
            {{ s__("mrWidget|Merge failed.") }}
          </span>
          <span
            :class="{ 'has-custom-error': mr.mergeError }"
          >
            {{ timerText }}
          </span>
        </span>
        <button
          class="btn btn-default btn-sm js-refresh-button"
          type="button"
          @click="refresh"
        >
          {{ s__("mrWidget|Refresh now") }}
        </button>
      </div>
    </template>
  </div>
</template>
